<!-- ui框架组件二次封装使用v-model -->
<template>
  <div>
    ui框架组件二次封装使用v-model
    <div>
      <el-select v-model="cityValue" placeholder="请选择" @change="change">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
  export default {
    name: "ModelInModel",
    model: {
      prop: 'city',
      event: 'changeCity'
    },
    props: {
      city: String
    },
    data() {
      return {
        cityValue: '',
        options: [
          {
            label: '杭州',
            value: 'hz'
          },
          {
            label: '衢州',
            value: 'qz'
          },
          {
            label: '龙游',
            value: 'ly'
          },
        ]
      }
    },
    watch: {
      cityValue() {
        this.$emit('changeCity', this.cityValue)
      }
    },
    methods: {
      change() {
        // this.$emit('changeCity', this.cityValue)
      }
    }
  }
</script>

<style scoped>

</style>
